<template>
  <div class="about">
    <div class="header">
      <p v-for="(list,index) in header" :key="index" :class="{color:select == index}" @click="click_list($event,index)">{{list.name}}
        <span class="border" v-if="select == index"></span>
      </p>
    </div>
    <!-- 联系我们 -->
    <div class="cont" v-show="select == 0">
      <div class="cont-center" v-html="about">
      </div>
    </div>
    <!-- 公司概况 -->
    <div class="cont" v-show="select == 1">
      <div class="cont-situation " id='aaa' v-html="about">
    </div>
      
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        header:[
          {name:'联系我们',color:true},
          {name:'公司概况',color:false}
        ],
        tit:'us',
        select: 0,
        
        // 内容
        about:'',
        url:''
      }
    },
    created() {
      this.url=this.$axios.defaults.baseURL
      this.getabout()
      // console.log(,'123')
    },
    
    mounted(){
      
    },
    methods: {
      // 精选试用
      getabout(){
        this.$get("api/gzh_mine.php?action=about", {
          uid:localStorage.getItem('uid'),
          type:this.tit == 'us'?'us':'company'
        }).then(res => { 
          this.about = res.data
          this.$nextTick(()=>{
            let imgs=document.querySelectorAll('img');
            for(let i=0;i<imgs.length;i++){
              let img_src=imgs[i].getAttribute('src');
              if(img_src.indexOf('http://')==-1 && img_src.indexOf('https://')==-1){
                  imgs[i].setAttribute('src','http://www.tjyyjkfwpt.com/'+img_src);
                  imgs[i].setAttribute('width','100%');
                  imgs[i].setAttribute('height','');
              }
            }
          });
        }).catch(err => {

          });
      },
      click_list(e, index) {
        if (index == 0) {
          this.select = 0;
          this.tit = 'us'
        } else if (index == 1) {
          this.select = 1;
          this.tit = 'company'
          
        }
        this.getabout()
      },
      
    },
  }
</script>

<style scoped>
  .about{
    width: 100%;
  }
  /* 头部 */
  .header{
    width:750px;
    height:87px;
    background:rgba(255,255,255,1);
    border-bottom: 1px solid #EFEFEF;
    border-top: 1px solid #EFEFEF;
    font-size:30px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    text-align: center;
    display: flex;
    align-items: center;
  }
  .header p{
    width: 50%;
    height:87px;
    line-height: 87px;
    position: relative;
  }
  .header p.color{
    color: #06A255;
  }
  .header p .border{
    width:36px;
    height:4px;
    background:rgba(6,162,85,1);
    border-radius:2px;
    position: absolute;
    bottom: 1px;
    left: 45%;
  }

  /* 内容 */
  .cont{
    width: 100%;
  }

  /* 联系我们 */
  .cont-center{
    width:640px;
    margin: auto;
    font-size: 20px;
  }
  /* .cont-center img{
    width:640px;
    height:390px;
    background: #ccc;
    margin-top: 36px;
  }
  .ways{
    font-size:30px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:30px;
    margin-top: 45px;
  }
  .way{
    font-size:28px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:30px;
  }
  .margin{
    margin-top: 23px;
    margin-bottom: 16px;
  }
  .marbot{
    margin-bottom: 16px;
  } */

  /* 公司概况 */
  .cont-situation{
    width:640px;
    margin: auto;
    font-size:28px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height:48px;
  }

  .cont-situation p{
    width:670px;
    height:315px;
    margin: auto;
    text-indent:2em;
    margin-top: 37px;
    margin-bottom: 30px;
  }
  .cont-situation img{
    width:100%!important;
  }
</style>
